<template>
  <div>
    <!-- 浮动导航 -->
    <div class="float-link-container">
      <FloatSubjectLinkComponent/>
    </div>
    <!-- 页面主体 -->
    <div class="main-container">
      <div class="main-wrap">

        <!-- 左侧主体 -->
        <div class="left-aside-container">
          <div class="left-aside-wrap">
            <div class="baike-list">
              <div class="baike-item" v-for="item in baikeList" :key="item.categoryId">
                <h1 class="title" v-text="item.categoryName"></h1>
                <ul class="topic-list">
                  <li class="topic" v-for="topic in item.topicList" :key="topic.id">
                    <a href="javascript:;" v-text="topic.name"></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧的列表 -->
        <div class="right-aside-container">
          <div class="right-aside-wrap">
            <!-- 搜索区域 -->
            <SearchComponent :defaultSearchKeywords="defaultSearchKeywords"/>
            <!-- 推荐列表 -->
            <RecommendListComponent :recommendList="recommendList"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FloatSubjectLinkComponent from "@/components/FloatSubjectLinkComponentView.vue";
import SearchComponent from '@/components/SearchComponentView.vue';
import RecommendListComponent from '@/components/RecommendListComponentView.vue';

export default {
  components: {
    FloatSubjectLinkComponent,
    SearchComponent,
    RecommendListComponent
  },
  data() {
    return {
      pageTitle: '',
      defaultSearchKeywords: '',
      recommendList: [],
      baikeList: []
    }
  },
  methods: {
    loadPageTitle() {
      this.pageTitle = '茶叶百科 - 学茶商城网';
      document.title = this.pageTitle;
    },
    loadDefaultSearchKeywords() {
      let defaultSearchKeywords = '六宝茶叶包括什么';
      this.defaultSearchKeywords = defaultSearchKeywords;
    },
    loadRecommendList() {
      let recommendList = [
        {
          id: 1,
          title: '白茶散茶存老后会，都有什么香气',
          image: '/images/20221228_08D083E533C9D99544E8C1210AD46DA6.jpg',
          link: '/article/details?id=9527'
        },
        {
          id: 2,
          title: '这三款茶的“出现时间”，是判断它们年份真伪的重要依据',
          image: '/images/20221229_2FE1F53FA9296196255C84EE83783C5E.png',
          link: '/article/details?id=9527'
        },
        {
          id: 3,
          title: '历代皇室贡茶名单 每种茶都独具特色',
          image: '/images/20221226_C251791A935B3AD64FF154857AC23622.png',
          link: '/article/details?id=9527'
        },
        {
          id: 4,
          title: '紫色芽叶茶树的“紫”，从何而来',
          image: '/images/20221230_B06120D5961351611327D376C2EE42E6.png',
          link: '/article/details?id=9527'
        },
        {
          id: 5,
          title: '普洱茶的“笋壳”包装有何妙处',
          image: '/images/20221226_777082A0FB2BA39B6804469A8F3B0DBE.png',
          link: '/article/details?id=9527'
        }
      ];
      this.recommendList = recommendList;
    },
    loadBaikeList() {
      let baikeList = [
        {
          categoryId: 1,
          categoryName: '绿茶',
          topicList: [
            {id: 1, name: '西湖龙井'},
            {id: 2, name: '碧螺春'},
            {id: 3, name: '太平猴魁'},
            {id: 4, name: '黄山毛峰'},
            {id: 5, name: '信阳毛尖'},
            {id: 6, name: '都匀毛尖'},
            {id: 7, name: '六安瓜片'},
            {id: 8, name: '蒙顶甘露'},
            {id: 9, name: '安吉白茶'},
            {id: 10, name: '恩施玉露'},
            {id: 11, name: '峨眉竹叶青'},
            {id: 12, name: '大佛龙井'},
            {id: 13, name: '滇池银毫'},
            {id: 14, name: '滇青'},
            {id: 15, name: '峨眉雪芽'},
            {id: 16, name: '狗牯脑'},
            {id: 17, name: '古丈毛尖'},
            {id: 18, name: '桂林毛尖'},
            {id: 19, name: '黄金芽'},
            {id: 20, name: '黄山针羽'},
            {id: 21, name: '金坛雀舌'},
            {id: 22, name: '敬亭绿雪'},
            {id: 23, name: '开化龙顶'},
            {id: 24, name: '庐山云雾'},
            {id: 25, name: '南京雨花茶'},
            {id: 26, name: '蒲江雀舌'},
            {id: 27, name: '普陀佛茶'},
            {id: 28, name: '千岛玉叶'},
            {id: 29, name: '雀舌报春'},
            {id: 30, name: '舒城兰花'},
            {id: 31, name: '汉中仙毫'},
            {id: 32, name: '汉中炒青'},
            {id: 33, name: '雁荡毛峰'},
            {id: 34, name: '永川秀芽'},
            {id: 35, name: '长兴紫笋'},
            {id: 36, name: '遵义毛峰'},
            {id: 37, name: '日照绿茶'},
            {id: 38, name: '崂山绿茶'},
            {id: 39, name: '紫阳毛尖'},
            {id: 40, name: '径山茶'},
            {id: 41, name: '惠明茶'},
            {id: 42, name: '老竹大方'},
            {id: 43, name: '汀溪兰香'},
            {id: 44, name: '休宁松萝'},
            {id: 45, name: '黄山绿牡丹'},
            {id: 46, name: '婺源茗眉'},
            {id: 47, name: '安化松针'},
            {id: 48, name: '武阳春雨'},
            {id: 49, name: '平水珠茶'},
            {id: 50, name: '青城雪芽'},
            {id: 51, name: '文君绿茶'},
            {id: 52, name: '天山绿茶'},
            {id: 53, name: '鸠坑毛尖'},
            {id: 54, name: '岳西翠兰'},
            {id: 55, name: '湄潭翠芽'},
            {id: 56, name: '乌牛早'},
            {id: 57, name: '宜宾雀舌'},
            {id: 58, name: '黎平雀舌'},
            {id: 59, name: '天台黄茶'},
            {id: 60, name: '西乡炒青'},
            {id: 61, name: '资溪白茶'},
            {id: 62, name: '天目湖白茶'},
            {id: 63, name: '覃塘毛尖'},
            {id: 64, name: '黄云翠竹'},
            {id: 65, name: '叙府龙芽'},
            {id: 66, name: '巴山雀舌'},
            {id: 67, name: '南糯白毫'},
            {id: 68, name: '凤冈富锌富硒茶'},
            {id: 69, name: '绿宝石茶'},
            {id: 70, name: '峡州碧峰'},
            {id: 71, name: '采花毛尖'},
            {id: 72, name: '商南泉茗'},
            {id: 73, name: '紫阳翠峰'},
            {id: 74, name: '凌云白毫'},
            {id: 75, name: '文君嫩绿'},
            {id: 76, name: '通天岩茶'},
            {id: 77, name: '象棋云雾'},
            {id: 78, name: '井冈银针'},
            {id: 79, name: '大鄣山云雾茶'},
            {id: 80, name: '临海蟠毫'},
            {id: 81, name: '羊岩勾青'},
            {id: 82, name: '千岛银珍'},
            {id: 83, name: '钱塘龙井'},
            {id: 84, name: '开化龙顶'},
            {id: 85, name: '齐山翠眉'},
            {id: 86, name: '金山时雨'},
            {id: 87, name: '屯溪绿茶'},
            {id: 88, name: '仪征绿杨春'},
            {id: 89, name: '水西翠柏'},
            {id: 90, name: '阳羡雪芽'},
            {id: 91, name: '太湖翠竹'},
            {id: 92, name: '茅山青峰'},
            {id: 93, name: '金山翠芽'},
            {id: 94, name: '花果山云雾茶'},
            {id: 95, name: '金刚碧绿'},
            {id: 96, name: '香山翠峰'},
            {id: 97, name: '太白银毫'},
            {id: 98, name: '诸城绿茶'},
            {id: 99, name: '保康松针'},
            {id: 100, name: '遂昌银猴'},
            {id: 101, name: '苍山雪绿'},
            {id: 102, name: '英德绿茶'},
            {id: 103, name: '保靖黄金茶'},
            {id: 104, name: '白马毛尖'},
            {id: 105, name: '天目青顶'},
            {id: 106, name: '贵定云雾茶'},
            {id: 107, name: '峨蕊'},
            {id: 108, name: '官庄毛尖'},
            {id: 109, name: '兰溪毛峰'},
            {id: 110, name: '龙岩斜背茶'},
            {id: 111, name: '松阳银猴'},
            {id: 112, name: '隆中茶'},
            {id: 113, name: '宝顶雪芽'},
            {id: 114, name: '宝顶绿茶'},
            {id: 115, name: '瑞草魁'},
            {id: 116, name: '南山寿眉'},
            {id: 117, name: '九龙茶'},
            {id: 118, name: '双井绿'},
            {id: 119, name: '无锡毫茶'},
            {id: 120, name: '龟山岩绿'},
            {id: 121, name: '双桥毛尖'},
            {id: 122, name: '桂林毛尖'},
            {id: 123, name: '车云山毛尖'},
            {id: 124, name: '麻姑茶'},
            {id: 125, name: '天柱剑毫'},
            {id: 126, name: '华顶云雾'},
            {id: 127, name: '小布岩茶'},
            {id: 128, name: '桐城小花'},
            {id: 129, name: '古劳茶'},
            {id: 130, name: '井岗翠绿'},
            {id: 131, name: '九华毛峰'},
            {id: 132, name: '汉水银梭'},
            {id: 133, name: '高桥银峰'},
            {id: 134, name: '秦巴雾毫'},
            {id: 135, name: '双龙银针'},
            {id: 136, name: '泉岗辉白'},
            {id: 137, name: '黎平雀舌'},
            {id: 138, name: '仙人掌茶'},
            {id: 139, name: '涌溪火青'},
            {id: 140, name: '仰天雪绿'},
            {id: 141, name: '南安石亭绿'},
            {id: 142, name: '上饶白眉'},
            {id: 143, name: '宝洪茶'},
            {id: 144, name: '兰馨雀舌'},
            {id: 145, name: '英山云雾'},
            {id: 146, name: '宁强雀舌'},
            {id: 147, name: '午子仙毫'},
            {id: 148, name: '金水翠峰'},
            {id: 149, name: '峨眉毛峰'},
            {id: 150, name: '江山绿牡丹'},
            {id: 151, name: '越乡龙井'},
            {id: 152, name: '狮峰龙井'}
          ]
        },
        {
          categoryId: 2,
          categoryName: '红茶',
          topicList: [
            {id: 153, name: '祁门工夫红茶'},
            {id: 154, name: '正山小种'},
            {id: 155, name: '金骏眉'},
            {id: 156, name: '银骏眉'},
            {id: 157, name: '九曲红梅'},
            {id: 158, name: '宁红工夫茶'},
            {id: 159, name: '宜红工夫茶'},
            {id: 160, name: '政和工夫茶'},
            {id: 161, name: '遵义红'},
            {id: 162, name: '日照红梅'},
            {id: 163, name: '川红工夫茶'},
            {id: 164, name: '日月潭红茶'},
            {id: 165, name: '滇红工夫茶'},
            {id: 166, name: '英德红茶'},
            {id: 167, name: '白琳工夫茶'},
            {id: 168, name: '宜兴红茶'},
            {id: 169, name: '坦洋工夫茶'},
            {id: 170, name: '英红九号'},
            {id: 171, name: '龙泉红茶'},
            {id: 172, name: '祁红毛峰'},
            {id: 173, name: '祁红香螺'},
            {id: 174, name: '烟小种'},
            {id: 175, name: '昌宁工夫茶'},
            {id: 176, name: '红碎茶'},
            {id: 177, name: '滇红宝塔'},
            {id: 178, name: '滇红金丝'},
            {id: 179, name: '滇红金螺'},
            {id: 180, name: '滇红金芽'},
            {id: 181, name: '滇红金针'},
            {id: 182, name: '桂红工夫茶'},
            {id: 183, name: '浮梁工夫茶'},
            {id: 184, name: '大赤甘'},
            {id: 185, name: '铜骏眉'},
            {id: 186, name: '湖红工夫茶'},
            {id: 187, name: '苏红工夫茶'},
            {id: 188, name: '泉城红'},
            {id: 189, name: '越红工夫茶'},
            {id: 190, name: '昭平红'},
            {id: 191, name: '日照红茶'},
            {id: 192, name: '信阳红'},
            {id: 193, name: '汉山红'}
          ]
        },
        {
          categoryId: 3,
          categoryName: '黑茶',
          topicList: [
            {id: 194, name: '重庆沱茶'},
            {id: 195, name: '六堡茶'},
            {id: 196, name: '安化黑茶'},
            {id: 197, name: '泾阳茯砖茶'},
            {id: 198, name: '雅安藏茶'},
            {id: 199, name: '老青茶'},
            {id: 200, name: '渠江薄片'},
            {id: 201, name: '金尖茶'},
            {id: 202, name: '康砖茶'},
            {id: 203, name: '蛹虫草茯茶'},
            {id: 204, name: '西藏黑茶'},
            {id: 205, name: '邛崃黑茶'},
            {id: 206, name: '花砖茶'},
            {id: 207, name: '湘尖茶'},
            {id: 208, name: '黑砖茶'},
            {id: 209, name: '千两茶'},
            {id: 210, name: '黑毛茶'},
            {id: 211, name: '泾渭茯茶'},
            {id: 212, name: '安茶'}
          ]
        },
        {
          categoryId: 4,
          categoryName: '白茶',
          topicList: [
            {id: 213, name: '白毫银针'},
            {id: 214, name: '白牡丹'},
            {id: 215, name: '贡眉'},
            {id: 216, name: '寿眉'},
            {id: 217, name: '月光白'},
            {id: 218, name: '政和白毫银针'},
            {id: 219, name: '信阳白茶'},
            {id: 220, name: '老白茶'},
            {id: 221, name: '松溪小白茶'},
            {id: 222, name: '小白贡眉'},
            {id: 223, name: '小白银针'}
          ]
        },
        {
          categoryId: 5,
          categoryName: '乌龙茶',
          topicList: [
            {id: 224, name: '铁观音'},
            {id: 225, name: '黄金桂'},
            {id: 226, name: '金萱乌龙'},
            {id: 227, name: '凤凰单丛'},
            {id: 228, name: '永春佛手'},
            {id: 229, name: '漳平水仙'},
            {id: 230, name: '冻顶乌龙'},
            {id: 231, name: '北斗武夷岩茶'},
            {id: 232, name: '武夷大红袍'},
            {id: 233, name: '东方美人茶'},
            {id: 234, name: '武夷水仙'},
            {id: 235, name: '水金龟'},
            {id: 236, name: '武夷肉桂'},
            {id: 237, name: '白芽奇兰'},
            {id: 238, name: '岭头单丛'},
            {id: 239, name: '文山包种'}
          ]
        },
        {
          categoryId: 6,
          categoryName: '黄茶',
          topicList: [
            {id: 240, name: '蒙顶黄芽'},
            {id: 241, name: '君山银针'},
            {id: 242, name: '霍山黄芽'},
            {id: 243, name: '广东大叶青'},
            {id: 244, name: '莫干黄芽'},
            {id: 245, name: '平阳黄汤'},
            {id: 246, name: '海马宫茶'},
            {id: 247, name: '北港毛尖'},
            {id: 248, name: '鹿苑毛尖'},
            {id: 249, name: '远安黄茶'},
            {id: 250, name: '黄大茶'},
            {id: 251, name: '沩山毛尖'}
          ]
        },
        {
          categoryId: 7,
          categoryName: '普洱茶',
          topicList: [
            {id: 252, name: '七子饼茶'},
            {id: 253, name: '普洱生茶'},
            {id: 254, name: '老班章'},
            {id: 255, name: '老茶头'},
            {id: 256, name: '普洱沱茶'},
            {id: 257, name: '普洱熟茶'},
            {id: 258, name: '小青柑柑普茶'},
            {id: 259, name: '碎银子'},
            {id: 260, name: '曼松普洱茶'},
            {id: 261, name: '曼西良普洱茶'},
            {id: 262, name: '猫耳朵普洱茶'},
            {id: 263, name: '坝卡竜普洱茶'},
            {id: 264, name: '坝卡囡 普洱茶'},
            {id: 265, name: '蟒蛇箐普洱茶'},
            {id: 266, name: '紫金砖普洱茶'},
            {id: 267, name: '凤凰窝普洱茶'},
            {id: 268, name: '竹筒茶'},
            {id: 269, name: '那卡普洱茶'},
            {id: 270, name: '倚邦普洱茶'},
            {id: 271, name: '蛮砖普洱茶'},
            {id: 272, name: '帕沙普洱茶'},
            {id: 273, name: '困鹿山普洱茶'},
            {id: 274, name: '小户赛普洱茶'},
            {id: 275, name: '忙肺普洱茶'},
            {id: 276, name: '邦崴普洱茶'},
            {id: 277, name: '落水洞普洱茶'},
            {id: 278, name: '老曼峨普洱茶'},
            {id: 279, name: '昔归普洱茶'},
            {id: 280, name: '易武普洱茶'},
            {id: 281, name: '紫芽苞茶'},
            {id: 282, name: '铜箐河普洱茶'},
            {id: 283, name: '辫子茶'},
            {id: 284, name: '紫娟茶'},
            {id: 285, name: '螃蟹脚普洱茶'},
            {id: 286, name: '紫芽茶'},
            {id: 287, name: '黄金叶'},
            {id: 288, name: '大雪山普洱茶'},
            {id: 289, name: '冰岛普洱茶'},
            {id: 290, name: '薄荷塘普洱茶'},
            {id: 291, name: '刮风寨普洱茶'},
            {id: 292, name: '布朗山普洱茶'},
            {id: 293, name: '南糯山普洱茶'},
            {id: 294, name: '麻黑普洱茶'},
            {id: 295, name: '普洱茶膏'},
            {id: 296, name: '大红柑普洱茶'},
            {id: 297, name: '铁饼'},
            {id: 298, name: '普洱砖茶'},
            {id: 299, name: '金瓜贡茶'},
            {id: 300, name: '下关沱茶'},
            {id: 301, name: '普洱龙珠'},
            {id: 302, name: '小金沱'}
          ]
        },
        {
          categoryId: 8,
          categoryName: '再加工茶',
          topicList: [
            {id: 303, name: '碧潭飘雪'},
            {id: 304, name: '桂花龙井'},
            {id: 305, name: '桂花乌龙'},
            {id: 306, name: '茉莉花茶'},
            {id: 307, name: '花毛峰'},
            {id: 308, name: '百合花茶'},
            {id: 309, name: '桂花茶'},
            {id: 310, name: '猴王茉莉花茶'},
            {id: 311, name: '踏雪兰妃'},
            {id: 312, name: '蜜桃乌龙茶'},
            {id: 313, name: '玄米茶'},
            {id: 314, name: '人参乌龙茶'}
          ]
        },
        {
          categoryId: 9,
          categoryName: '代用茶',
          topicList: [
            {id: 315, name: '莓茶'},
            {id: 316, name: '薄荷茶'},
            {id: 317, name: '牛蒡茶'},
            {id: 318, name: '栀子茶'},
            {id: 319, name: '金边玫瑰花茶'},
            {id: 320, name: '银杏叶茶'},
            {id: 321, name: '杜仲茶'},
            {id: 322, name: '冬虫夏草茶'},
            {id: 323, name: '鹧鸪茶'},
            {id: 324, name: '平阴玫瑰茶'},
            {id: 325, name: '丁香茶'},
            {id: 326, name: '余庆苦丁茶'},
            {id: 327, name: '昆仑雪菊茶'},
            {id: 328, name: '黑枸杞茶'},
            {id: 329, name: '藤茶'},
            {id: 330, name: '桑叶茶'},
            {id: 331, name: '冬瓜荷叶茶'},
            {id: 332, name: '罗布麻茶'},
            {id: 333, name: '罗汉果茶'},
            {id: 334, name: '山楂茶'},
            {id: 335, name: '黑苦荞'},
            {id: 336, name: '青钱柳茶'},
            {id: 337, name: '大麦茶'},
            {id: 338, name: '五宝茶'},
            {id: 339, name: '苦丁茶'},
            {id: 340, name: '铁皮石斛茶'},
            {id: 341, name: '霍山石斛'},
            {id: 342, name: '三宝茶'},
            {id: 343, name: '莓茶'},
            {id: 344, name: '绞股蓝茶'},
            {id: 345, name: '菊苣茶'},
            {id: 346, name: '杭白菊'},
            {id: 347, name: '枸杞茶'},
            {id: 348, name: '荷叶茶'},
            {id: 349, name: '柠檬茶'},
            {id: 350, name: '月季花茶'},
            {id: 351, name: '金盏花茶'},
            {id: 352, name: '牡丹花茶'},
            {id: 353, name: '玫瑰花茶'},
            {id: 354, name: '洛神花茶'},
            {id: 355, name: '苦荞茶'},
            {id: 356, name: '决明子茶'},
            {id: 357, name: '玉兰花茶'},
            {id: 358, name: '勿忘我花茶'},
            {id: 359, name: '金丝皇菊'},
            {id: 360, name: '胖大海茶'},
            {id: 361, name: '蒲公英茶'},
            {id: 362, name: '胎菊'},
            {id: 363, name: '贡菊'},
            {id: 364, name: '竹叶茶'},
            {id: 365, name: '金银花茶'}
          ]
        },
      ];
      this.baikeList = baikeList;
    }
  },
  mounted() {
    this.loadPageTitle();
    this.loadDefaultSearchKeywords();
    this.loadBaikeList();
    this.loadRecommendList();
  }
}
</script>

<style scoped>
.baike-list {
  background: #fff;
  border-radius: 5px;
  padding: 35px;
}

.baike-item {
  text-align: left;
}

.baike-item .title {
  font-size: 18px;
  color: #333;
  margin-bottom: 30px;
}

.baike-list .topic-list {
  display: flex;
  flex-flow: wrap;
}

.baike-list .topic-list .topic {
  width: 130px;
  margin: 0 0 20px 30px;
}

.baike-list .topic-list .topic a {
  display: block;
  padding: 8px 15px;
  text-align: center;
  font-size: 14px;
  color: #333;
  background: #f5f5f5;
  border-radius: 5px;
}

.baike-list .topic-list .topic a:hover {
  background: #44B549;
  color: #fff;
}
</style>
